<template>
  <div class="child-box">
    <p>我是子组件</p>
    <!-- 插槽 -->
    <!-- <slot>
      <div>我是插槽默认内容</div>
    </slot> -->

    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<style>
.child-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>